// http://www.itcbc.com:8080
// 获取数据并渲染
function renderCategory() {
  axios.get('/my/category/list').then(res => {
    let { status, data } = res.data;
    if (status === 0) {
      let str = '';
      data.forEach(item => {
        str += `
        <tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
              <button data-id='${item.id}' data-name='${item.name}' data-alias='${item.alias}' type="button" class="layui-btn layui-btn-xs">编辑</button>
              <button data-id='${item.id}' type="button" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>`
      });
      $("tbody").html(str);
    }
  })
}
renderCategory();


// 删除功能
$("tbody").on('click', '.del', function () {
  let id = $(this).attr('data-id')
  // 询问是否要删除 删除是敏感操作，必须要询问
  layer.confirm('确定要删除吗', { icon: 3, title: '提示' }, function (index) {
    //do something
    //第一种传参方法:用？拼接到url后面
    axios.get(`/my/category/delete?id=${id}`).then(res => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        renderCategory();
      }

    })
    layer.close(index);
  });
})

// 添加功能
let addIndex;
// 1、点击添加按钮出现弹层
$("button:contains('添加类别')").on('click', function () {
  addIndex = layer.open({
    type: 1,
    title: '添加类别',
    // 2、设置弹层内容
    content: $("#tpl-add").html(),
    ares: ['500px', '250px']
  })
})
// 3、表单提交，发送ajax请求，完成提交
$("body").on('submit', "#add-form", function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  axios.post('/my/category/add', data).then(res => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory();
      layer.close(addIndex)
    }
  })

})


// 编辑功能 （1）出现弹层 （2）获取三个自定义属性值 （3）设置input的默认值（即数据回填）
let editIndex;
// 1、点击编辑按钮 
$("tbody").on('click', 'button:contains("编辑")', function () {
  // 获取三个自定义属性值
  let shuju = $(this).data();//不给data传递参数就是获取全部的data-xxx属性，获取的是一个对象
  editIndex = layer.open({
    type: 1,
    title: '编辑类别',
    // 2、设置弹层内容 
    content: $("#tpl-edit").html(),
    ares: ['500px', '250px'],
    // success是层弹出后的成功回调方法
    success:function(){
      // 3、数据回填
      // 注意顺序，弹层出来之后,保证表单已经存在,input已经出现,再数据回填
      // 使用layui的form模块快速地数据回填
      let form = layui.form;
      form.val('edit',shuju);
    }
  });
  
})

// 4、表单提交，完成修改
$("body").on("submit","#edit-form",function(e){
  e.preventDefault();
  // serialize() 不能获取禁用状态和的值，能获取隐藏域的值
  let data = $(this).serialize();
  axios.post('/my/category/update', data).then(res => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory();
      layer.close(editIndex)
    }
  })

})